<template>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>

  <button @click="updateName">update name</button>
</template>

<script>
import { reactive, toRef } from 'vue';

export default {
  setup() {
    const data = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // !问题 1：模板中多次用到了 data.，麻烦
    // !问题 2：明明模板中只用了 data 中的两个属性，你却把整个 data 都导出了，性能浪费

    // toRef 可以把响应式对象中的某个属性变为单独的响应式 ref 对象，并且转换之后的值（对象）和原来是关联的
    const name = toRef(data, 'name')
    const age = toRef(data, 'age')

    const updateName = () => {
      // name.value = '谈啸'
      // 下面就叫“关联的”，改 data.name 也会影响到 name.value
      data.name = '谈啸'
    }
    return { name, age, updateName } 
  }
}
</script>